/* global React */
function RaceGeneratorScreen() {
  const generatorData = window.GT7DATA?.raceGenerator;
  const tools = window.GT7RaceGenerator;
  const hasGeneratorCandidates = Boolean(
    (generatorData?.candidates?.length || generatorData?.dailyInspiredTemplates?.length)
  );
  const hasGeneratorData = Boolean(hasGeneratorCandidates && generatorData?.options && tools);
  const initialOptions = hasGeneratorData ? generatorData.options : DEFAULT_GENERATOR_OPTIONS;
  const [options, setOptions] = React.useState(initialOptions);
  const [result, setResult] = React.useState(() => {
    if (!hasGeneratorData) {
      return EMPTY_GENERATOR_RESULT;
    }

    return tools.generateRacePlaylist({
      ...generatorData.options,
      random: tools.createSeededRandom(`initial-${Date.now()}`),
    }, generatorData);
  });
  const [copied, setCopied] = React.useState(false);
  const initializedGeneratorRef = React.useRef(hasGeneratorData);

  React.useEffect(() => {
    if (!hasGeneratorData || initializedGeneratorRef.current) {
      return;
    }

    const nextOptions = generatorData.options;
    setOptions(nextOptions);
    setResult(tools.generateRacePlaylist({
      ...nextOptions,
      random: tools.createSeededRandom(`initial-${Date.now()}`),
    }, generatorData));
    setCopied(false);
    initializedGeneratorRef.current = true;
  }, [generatorData, hasGeneratorData, tools]);

  const carOptions = tools?.RACE_GENERATOR_CAR_OPTIONS ?? FALLBACK_CAR_OPTIONS;

  const shareText = hasGeneratorData ? tools.formatPlaylistForShare(result.playlist, result.summary) : '';

  if (!hasGeneratorData) {
    return (
      <section>
        <PageTitle eyebrow="Non-league" title="Race Generator" note="Generator data is unavailable." />
      </section>
    );
  }

  function updateOption(key, value) {
    setOptions((current) => ({ ...current, [key]: key === 'raceCount' ? Number(value) : value }));
  }

  function generate() {
    const lockedRaces = result.playlist.filter((race) => race.locked);
    setResult(tools.generateRacePlaylist({
      ...options,
      lockedRaces,
      random: tools.createSeededRandom(`${Date.now()}-${Math.random()}`),
    }, generatorData));
    setCopied(false);
  }

  function toggleLock(raceId) {
    setResult((current) => {
      const playlist = current.playlist.map((race) => race.id === raceId ? { ...race, locked: !race.locked } : race);
      return { ...current, playlist, summary: tools.summarizePlaylist(playlist, current.meta) };
    });
  }

  function regenerateRace(raceId) {
    setResult((current) => tools.replacePlaylistRace(current.playlist, raceId, {
      ...options,
      random: tools.createSeededRandom(`${raceId}-${Date.now()}`),
    }, generatorData));
    setCopied(false);
  }

  async function copyShareText() {
    try {
      await navigator.clipboard.writeText(shareText);
      setCopied(true);
    } catch (error) {
      setCopied(false);
    }
  }

  return (
    <section>
      <PageTitle eyebrow="Non-league" title="Race Generator" note="Create a casual 2-5 race lobby playlist." />
      <div className="race-generator-layout" style={{ display: 'grid', gridTemplateColumns: '320px minmax(0, 1fr)', gap: 20, alignItems: 'start' }}>
        <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', padding: 16 }}>
          <Control label="Races" value={options.raceCount} onChange={(value) => updateOption('raceCount', value)} options={[
            { value: 2, label: '2' },
            { value: 3, label: '3' },
            { value: 4, label: '4' },
            { value: 5, label: '5' },
          ]} />
          <Control label="Night" value={options.nightStyle} onChange={(value) => updateOption('nightStyle', value)} options={[
            { value: 'balanced', label: 'Balanced' },
            { value: 'mixed', label: 'Mixed' },
            { value: 'chaos', label: 'Chaos' },
          ]} />
          <Control label="Cars" value={options.carVibe} onChange={(value) => updateOption('carVibe', value)} options={carOptions} />
          <Control label="Tracks" value={options.trackVibe} onChange={(value) => updateOption('trackVibe', value)} options={[
            { value: 'mixed', label: 'Mixed' },
            { value: 'technical', label: 'Technical' },
            { value: 'speed', label: 'Speed' },
            { value: 'street', label: 'Street' },
          ]} />
          <Control label="Length" value={options.duration} onChange={(value) => updateOption('duration', value)} options={[
            { value: 'short', label: 'Short' },
            { value: 'standard', label: 'Standard' },
            { value: 'long', label: 'Long' },
          ]} />
          <button onClick={generate} style={primaryButtonStyle}>Generate</button>
        </div>

        <div style={{ display: 'grid', gap: 14 }}>
          {result.playlist.map((race) => (
            <RaceCard
              key={`${race.order}-${race.id}`}
              race={race}
              onLock={() => toggleLock(race.id)}
              onRegenerate={() => regenerateRace(race.id)}
            />
          ))}
        </div>
      </div>

      <div className="race-generator-summary-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, .8fr) minmax(0, 1.2fr)', gap: 20, marginTop: 20 }}>
        <SummaryPanel summary={result.summary} meta={result.meta} />
        <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', padding: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', gap: 12, alignItems: 'center', marginBottom: 10 }}>
            <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--text-strong)' }}>Share text</h3>
            <button onClick={copyShareText} style={secondaryButtonStyle}>{copied ? 'Copied' : 'Copy'}</button>
          </div>
          <textarea readOnly value={shareText} style={{ width: '100%', minHeight: 150, resize: 'vertical', borderRadius: 'var(--radius-xs)', border: '1px solid var(--border-subtle)', background: 'var(--ink-950)', color: 'var(--text-body)', padding: 12, fontFamily: 'var(--font-mono)', fontSize: 12 }} />
        </div>
      </div>
    </section>
  );
}

function Control({ label, value, onChange, options }) {
  return (
    <label style={{ display: 'grid', gap: 6, marginBottom: 12 }}>
      <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, textTransform: 'uppercase', color: 'var(--text-faint)' }}>{label}</span>
      <select value={value} onChange={(event) => onChange(event.target.value)} style={{ height: 38, borderRadius: 'var(--radius-xs)', border: '1px solid var(--border-subtle)', background: 'var(--ink-900)', color: 'var(--text-strong)', padding: '0 10px' }}>
        {options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}
      </select>
    </label>
  );
}

function RaceCard({ race, onLock, onRegenerate }) {
  return (
    <article style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', padding: 16 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '44px minmax(0, 1fr) auto', gap: 12, alignItems: 'start' }}>
        <div style={{ height: 36, borderRadius: 'var(--radius-xs)', display: 'grid', placeItems: 'center', background: 'var(--brand)', color: '#fff', fontFamily: 'var(--font-display)', fontWeight: 700 }}>{race.order}</div>
        <div>
          <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', color: 'var(--text-strong)', fontSize: 18 }}>{race.title}</h3>
          <div style={{ marginTop: 6, color: 'var(--text-muted)', fontSize: 13 }}>{race.track} · {race.carRule} · {race.tyre} · {race.laps} laps</div>
          <div style={{ marginTop: 8, color: 'var(--text-faint)', fontSize: 12 }}>{race.settings}</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 10 }}>
            {race.tags.map((tag) => <span key={tag} style={tagStyle}>{tag.replace('_', ' ')}</span>)}
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8 }}>
          <button onClick={onLock} style={secondaryButtonStyle}>{race.locked ? 'Unlock' : 'Lock'}</button>
          <button onClick={onRegenerate} disabled={race.locked} style={{ ...secondaryButtonStyle, opacity: race.locked ? .45 : 1 }}>Redo</button>
        </div>
      </div>
    </article>
  );
}

function SummaryPanel({ summary, meta }) {
  return (
    <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-sm)', background: 'var(--surface-card)', padding: 16 }}>
      <h3 style={{ margin: 0, fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--text-strong)' }}>Playlist summary</h3>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 10, marginTop: 12 }}>
        <Metric label="Races" value={summary.raceCount} />
        <Metric label="Minutes" value={summary.estimatedTotalMin} />
        <Metric label="Families" value={summary.trackFamilyCount} />
      </div>
      <div style={{ marginTop: 12, color: 'var(--text-muted)', fontSize: 13 }}>{summary.notes}</div>
      {summary.warnings.length > 0 && (
        <div style={{ display: 'grid', gap: 8, marginTop: 12 }}>
          {summary.warnings.map((warning) => (
            <div key={`${warning.code}-${warning.message}`} style={{ color: warning.severity === 'caution' ? 'var(--amber-500)' : 'var(--accent)', fontSize: 12 }}>{warning.message}</div>
          ))}
        </div>
      )}
      {meta.relaxed.length > 0 && <div style={{ marginTop: 10, color: 'var(--text-faint)', fontSize: 12 }}>Filters broadened: {meta.relaxed.join(', ')}</div>}
    </div>
  );
}

function Metric({ label, value }) {
  return (
    <div style={{ border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xs)', padding: 10 }}>
      <div style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-strong)', fontSize: 18 }}>{value}</div>
      <div style={{ color: 'var(--text-faint)', fontSize: 11, textTransform: 'uppercase' }}>{label}</div>
    </div>
  );
}

const primaryButtonStyle = {
  width: '100%',
  height: 42,
  border: 'none',
  borderRadius: 'var(--radius-xs)',
  background: 'var(--brand)',
  color: '#fff',
  fontFamily: 'var(--font-display)',
  fontWeight: 700,
  cursor: 'pointer',
};

const secondaryButtonStyle = {
  height: 32,
  border: '1px solid var(--border-subtle)',
  borderRadius: 'var(--radius-xs)',
  background: 'var(--ink-900)',
  color: 'var(--text-strong)',
  fontFamily: 'var(--font-display)',
  fontSize: 12,
  cursor: 'pointer',
};

const tagStyle = {
  border: '1px solid var(--border-subtle)',
  borderRadius: 'var(--radius-xs)',
  padding: '3px 7px',
  color: 'var(--text-faint)',
  fontSize: 11,
  textTransform: 'uppercase',
};

const FALLBACK_CAR_OPTIONS = [
  { value: 'mixed', label: 'Mixed' },
  { value: 'road', label: 'Road Cars' },
  { value: 'race', label: 'Race Cars' },
  { value: 'gr1', label: 'Gr.1' },
  { value: 'gr2', label: 'Gr.2' },
  { value: 'gr3', label: 'Gr.3' },
  { value: 'gr4', label: 'Gr.4' },
  { value: 'grb', label: 'Gr.B' },
  { value: 'super_formula', label: 'Super Formula' },
  { value: 'vgt', label: 'VGT' },
  { value: 'kart', label: 'Kart' },
  { value: 'classic_race', label: 'Classic Race Cars' },
  { value: 'other_race', label: 'Other Race Cars' },
  { value: 'one_make', label: 'One Make' },
];

const DEFAULT_GENERATOR_OPTIONS = {
  raceCount: 3,
  nightStyle: 'mixed',
  carVibe: 'mixed',
  trackVibe: 'mixed',
  duration: 'standard',
};

const EMPTY_GENERATOR_RESULT = {
  playlist: [],
  summary: {
    raceCount: 0,
    estimatedTotalMin: 0,
    trackFamilyCount: 0,
    notes: '',
    warnings: [],
  },
  meta: {
    relaxed: [],
  },
};

window.RaceGeneratorScreen = RaceGeneratorScreen;